
<template>
  <div class="map-container" :style="{ width: '100%', height: closeDrawing ? '100%' : 'calc(100% - 20px)' }">
    <baidu-map :center="center" :zoom="zoom" @ready="onMapReady" ak="N5rTOkGVQBbjw8MmbEkGfXbY0Vfi1jo1" :scroll-wheel-zoom="true"
      style="width: 100%; height: 100%;" ref="baiduMap">
      <bm-polygon v-for="(path, index) in polygonPaths" :key="index" :path="path" :stroke-weight="2" stroke-color="blue"
        fill-color="rgba(0, 0, 255, 0.2)"></bm-polygon>
      <!-- 循环添加所有的点位标记 -->
      <bm-marker v-for="(point, index) in currentPolygon" :key="'marker' + index"
        :position="{ lng: point.lng, lat: point.lat }" :icon="customIcon"></bm-marker>
    </baidu-map>
    <div style="padding: 10px 0;" v-if="!closeDrawing">
      <el-button @click="toggleDrawingMode">{{ isDrawingMode ? '完成绘制' : '开始绘制' }}</el-button>
      <el-button @click="clearPolygons">清除所有多边形</el-button>
    </div>
  </div>
</template>  
  
<script>
import { centroid } from '@turf/turf';
// 确保已经正确引入了百度地图API  
export default {
  props: {
    closeDrawing: {
      type: Boolean,
      default: false,
    },
    polygonPathsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    latLngList: {
      type: Array,
      default: () => {
        return []
      }
    },
    center: {
      type: Object,
      default: () => ({ lng: 116.404, lat: 39.915 }),
    },
    zoom: {
      type: Number,
      default: 18,
    },
    //是否是单个图层
    isSingle: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      mapInstance: null, // 地图实例  
      polygonPaths: [], // 存储所有多边形的路径  
      currentPolygon: [], // 当前正在绘制的多边形顶点  
      labels: [], // 存储所有的标签实例，用于后续清除  
      isDrawingMode: false, // 控制绘制模式的标志  
      customIcon: { // 自定义标记的图标  
        url: require('../../assets/fill.png'), // 替换为图标路径  
        size: { width: 32, height: 32 }, // 设置图标的宽高  
        opts: { anchor: { width: 16, height: 32 } } // 设置锚点位置  
      },
      markers: [], // 存储所有的标记实例，用于后续清除
      labelmarkers: [],
      markerClusterer: null, // 点聚合实例  
    };
  },
  mounted () {

  },
  methods: {
    onZoomEnd () {
      const zoomLevel = this.mapInstance.getZoom(); // 获取当前缩放级别  
      console.log('地图缩放完成，当前缩放级别：', zoomLevel);
      // 在这里执行你需要在缩放完成后进行的操作  
    },
    //地图加载后初始化图层数据
    initData () {
      if (this.closeDrawing) {
        this.polygonPaths = []
        this.polygonPathsList.forEach(item => {
          Array.isArray(item.lngLat) && this.polygonPaths.push(item.lngLat)
        })
        this.drawMarkers(this.polygonPathsList)
      } else {
        this.currentPolygon = this.latLngList;
        this.drawingMode();
      }
    },
    onMapReady (baiduMap) {
      this.mapInstance = baiduMap.map; // 保存地图实例的引用  
      this.mapInstance.setMapType(BMAP_SATELLITE_MAP); 
      // 添加地图点击事件监听器，用于在绘制模式下添加多边形顶点  
      this.mapInstance.addEventListener('zoomend', this.onZoomEnd);
      this.mapInstance.addEventListener('click', this.addPolygonPoint);
      this.initData();
    },
    //看似是绘制
    toggleDrawingMode () {
      this.isDrawingMode = !this.isDrawingMode; // 切换绘制模式状态  
      if (this.isSingle && this.isDrawingMode) {
        this.clearPolygons()
      }
      if (!this.isDrawingMode && this.currentPolygon.length > 0) {
        this.drawingMode()
      }
    },
    drawingMode () {
      this.polygonPaths.push(this.currentPolygon);
      this.currentPolygon = []; // 重置当前正在绘制的多边形顶点数组  
      this.$emit('currentPolygon', JSON.parse(JSON.stringify(this.polygonPaths)));
    },
    drawMarkers (list = []) {
      list.forEach((item, index) => {
        let lngLat = item.lngLat;
        if (lngLat.length > 0) {
          // 计算多边形的中心点  
          const polygonCenter = this.calculatePolygonCenter(lngLat);
          // 创建并添加标记  
          const marker = new BMap.Marker(new BMap.Point(polygonCenter.lng, polygonCenter.lat));
          // 创建文字标注  
          const label = new BMap.Label((item.label || '养殖设施'), {
            offset: new BMap.Size(30, 0), // 设置标注的偏移量 
          });
          label.setStyle({
            color: '#ffffff',
            borderRadius: '8px',
            borderColor: '#409EFF',
            backgroundColor: '#409EFF',
            fontSize: '14px',
            padding: '5px 10px',
          });
          marker.setLabel(label);
          // 可以为标记添加自定义图标，或者使用默认图标  
          marker.setIcon(new BMap.Icon(require('../../assets/fill.png'), new BMap.Size(28, 65)));

          // 将标记添加到地图上  
          this.mapInstance.addOverlay(marker);
          // 可以选择性地为标记添加点击事件等  
          // marker.addEventListener('click', function () {
          //   alert('您点击了标记');
          // });
          this.labelmarkers.push(marker); // 将标记实例保存到数组中，以便后续管理  
        }
      });
      new BMapLib.MarkerClusterer(this.mapInstance, { markers: this.labelmarkers });
    },
    calculatePolygonCenter (polygon) {
      if (polygon.length == 3) return this.calculateTriangleCentroid(polygon);
      // 假设polygon是一个数组，其中每个元素都是一个包含lng和lat属性的对象  
      // 转换成Turf.js所需的GeoJSON Polygon格式  
      const geojsonPolygon = {
        type: 'Polygon',
        coordinates: [polygon.map(point => [point.lng, point.lat])]
      };
      // 使用Turf.js的centroid函数计算多边形的重心  
      const centroidPoint = centroid(geojsonPolygon);
      // 提取重心的经纬度  
      const [lng, lat] = centroidPoint.geometry.coordinates;
      console.log(centroidPoint);
      return { lng, lat };
    },
    calculateTriangleCentroid (polygon) {
      if (polygon.length !== 3) return
      const point1 = polygon[0]
      const point2 = polygon[1]
      const point3 = polygon[2]
      // 假设每个点都是一个包含两个数值属性（例如：lng 和 lat，或 x 和 y）的对象  
      const x1 = point1.lng;
      const y1 = point1.lat;
      const x2 = point2.lng;
      const y2 = point2.lat;
      const x3 = point3.lng;
      const y3 = point3.lat;
      // 计算重心的x和y坐标  
      const centroidX = (x1 + x2 + x3) / 3;
      const centroidY = (y1 + y2 + y3) / 3;
      // 返回重心的坐标对象  
      return { lng: centroidX, lat: centroidY }; // 或者 { x: centroidX, y: centroidY }，取决于你的坐标系统  
    },
    addPolygonPoint (e) {
      if (!this.isDrawingMode) return;
      const point = { lng: e.point.lng, lat: e.point.lat };
      this.currentPolygon.push(point);

      // 使用默认标记或简单图形代替自定义图标  
      // const marker = new BMap.Marker(new BMap.Point(point.lng, point.lat)); // 默认标记  

      // 或者使用一个小圆点作为标记  
      const circle = new BMap.Circle(new BMap.Point(point.lng, point.lat), 5, {
        fillColor: "blue", // 填充颜色  
        strokeWeight: 1, // 轮廓线宽  
        strokeColor: "blue", // 轮廓线颜色  
        fillOpacity: 0.6 // 填充透明度  
      });
      this.mapInstance.addOverlay(circle); // 将圆形添加到地图上  
      this.markers.push(circle); // 将圆形实例保存到数组中，以便后续清除  
    },
    clearPolygons () {
      this.polygonPaths = [];
      this.currentPolygon = [];
      this.markers.forEach(marker => {
        this.mapInstance.removeOverlay(marker); // 移除每个圆形标记    
      });
      this.labelmarkers.forEach(marker => {
        this.mapInstance.removeOverlay(marker);
      });
      this.markers = []; // 清空标记数组    
      this.mapInstance = []; // 清空标记数组 
      this.$emit('currentPolygon', JSON.parse(JSON.stringify(this.currentPolygon)))
      // 清除所有标签  
      this.labels.forEach(label => {
        this.mapInstance.removeOverlay(label);
      });
      this.labels = []; // 清空标签数组  
    },
  },
  beforeDestroy () {
    // 在组件销毁前移除地图点击事件监听器，以避免潜在的内存泄漏问题  
    if (this.mapInstance) {
      this.mapInstance.removeEventListener('click', this.addPolygonPoint);
    }
  },
};  
</script>
<style lang="scss" scoped>
  /* 尝试隐藏百度地图的logo和底部信息 */
  ::v-deep .BMap_cpyCtrl,
  ::v-deep .anchorBL {
    display: none !important;
  }
</style>
